<template>
  <div class="list-wrap">
    <div class="drow-menu">
      <van-dropdown-menu>
          <van-dropdown-item v-model="priceType" :options="priceOption" />
          <van-dropdown-item v-model="saleType" :options="saleOption" />
      </van-dropdown-menu>
    </div>
    <div class="list">
      <van-card 
        v-for="item in list" 
        :key = "item.proid" 
        :price="(item.originprice * item.discount /10).toFixed(2)"
        :num="item.sales"
        :desc="item.desc" 
        :title="item.category"
        :thumb="item.img1"
        :origin-price="item.originprice"
      >
      <template #tags>
        <van-tag plain type="primary" v-if="item.issale">秒杀</van-tag>
        <van-tag plain type="primary"  v-if="item.isrecommend">折扣</van-tag>
      </template>
      </van-card>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import {ref,reactive, computed,watch} from 'vue'
  import { onMounted } from 'vue'
  import { getCategoryBrandProListAPI } from '@/api/product';
  import { showFailToast } from 'vant';

  let route:any = useRoute()
  // let query = route.query
  // console.log(111,query);
  const queryData = reactive(route.query) // 路由参数
  const pageData = reactive({ // 分页
    count:1,
    limitNum:10
  })
  const listParams = computed(()=>{
    return {...queryData,...pageData}
  })
  console.log("列表页",listParams);
  
  const list = ref()

  const priceType = ref(0)
  const priceOption = ref([
    { text :'价格升序',value:0},
    { text :'价格降序',value:1}
  ])

  const saleType = ref(0)
  const saleOption = ref([
    { text :'销量升序',value:0},
    { text :'销量降序',value:1}
  ])
  const sortPriceData = () =>{
    if(priceType.value == 0){
      list.value.sort((a,b)=>(a.originprice * a.discount / 10) - (b.originprice * b.discount / 10))
    }else{
      list.value.sort((a,b)=>(b.originprice * b.discount / 10) - (a.originprice * a.discount / 10))
    }
  }
  const sortSaleData = ()=>{
    if(saleType.value == 0){
      list.value.sort((a,b)=>a.sales -b.sales)
    }else{
      list.value.sort((a,b)=>b.sales -a.sales)
    }
  }
  const getCategoryBrandProList = async ()=>{
    try{
      let result = await getCategoryBrandProListAPI(listParams.value)
      console.log("商品列表请求成功", result);
      list.value = result.data    
      sortPriceData()  
    }catch(err:any){
      showFailToast(err.message)
    }
  }
  watch(priceType,()=>{
    sortPriceData()
  })
  watch(saleType,()=>{
    sortSaleData()
  })
  
  onMounted(async ()=>{
    await getCategoryBrandProList()
  })

  
</script>

<style scoped>

</style>